<template>
  <div class="siteMaintenance">
    <!-- 头部 --start-->
    <div class="nav">
      <p>
        <span>.</span>
        {{header}}
      </p>
      <div id="nav_go5">
        <el-button
          type="info"
          icon="el-icon-back"
          class="btn_fanhui"
          @click="revert()"
        >返回
        </el-button
        >
      </div>
    </div>
    <!--主题内容部分开始-->
    <div class="Main">
      <p>维修服务现场记录单</p>
      <div class="header">
        <!--        <ul>-->
        <!--          <li>-->
        <!--            <span>维修服务日期 :</span>-->
        <!--            <el-input style="width: 50%;"></el-input>-->
        <!--          </li>-->
        <!--          <li>-->
        <!--            <span>维修服务站 :</span>-->
        <!--            <el-input style="width: 50%;"></el-input>-->
        <!--          </li>-->
        <!--        </ul>-->
        <ul>
          <li>
            <span>维修服务日期</span>
            <el-input style="width: 70%;"></el-input>
          </li>
          <li>
            <span>维修服务站</span>
            <el-input style="width: 70%;"></el-input>
          </li>
          <li>
            <span>服务站主管</span>
            <el-input style="width: 70%;"></el-input>
          </li>
          <li>
            <span>服务人员</span>
            <el-input style="width: 70%;"></el-input>
          </li>
          <li>
            <span>电话</span>
            <el-input style="width: 70%;"></el-input>
          </li>
          <li>
            <span>客户单位</span>
            <el-input style="width: 70%;"></el-input>
          </li>
          <li>
            <span>联系人</span>
            <el-input style="width: 70%;"></el-input>
          </li>
          <li>
            <span>联系地址</span>
            <el-input style="width: 70%;"></el-input>
          </li>
          <li>
            <span>联系方式（区号）</span>
            <el-input style="width: 70%;"></el-input>
          </li>
          <li>
            <span>车辆品牌/车型</span>
            <el-input style="width: 70%;"></el-input>
          </li>
          <li>
            <span>车辆号</span>
            <el-input style="width: 70%;"></el-input>
          </li>
        </ul>
      </div>
      <div class="intermediate">
        <ul>
          <li>
            <span>
              出厂编号
            </span>
            <el-input style="width: 70%;"></el-input>
          </li>
          <li>
            <span>
              保修卡号
            </span>
            <el-input style="width: 70%;"></el-input>
          </li>
          <li>
            <span>
              购车日期
            </span>
            <el-input style="width: 70%;"></el-input>
          </li>
          <li>
            <span>
              压缩机号
            </span>
            <el-input style="width: 70%;"></el-input>
          </li>
          <li>
            <span>
              行驶里程
            </span>
            <el-input style="width: 70%;"></el-input>
          </li>
          <li>
            <span>
              三包期
            </span>
            <el-input style="width: 70%;"></el-input>
          </li><li>
            <span>
              底盘号
            </span>
          <el-input style="width: 70%;"></el-input>
        </li>
          <li>
            <span>
              发动机号
            </span>
            <el-input style="width: 70%;"></el-input>
          </li>
          <li>
            <span>
              行驶证登记日期
            </span>
            <el-input style="width: 70%;"></el-input>
          </li>
          <li>
            <span>
              车辆用途
            </span>
            <el-input style="width: 70%;"></el-input>
          </li>
        </ul>
      </div>
      <div class="intermediate-two">
        <ul>

          <li>
            <div>
              <span>故障编号</span>
              <el-input style="width: 70%;"></el-input>
            </div>
            <div>
              <span>系统异常时</span>
              <el-input style="width: 70%;"></el-input>
              <!--            <el-input style="width: 70%;" class="el-input-two"></el-input>-->
            </div>
          </li>

          <li class="el-input-center">
            <span>原因分析</span>
            <el-input
              type="textarea"
              :autosize="{ minRows: 4, maxRows: 6}"
              placeholder="请输入内容"
              v-model="textarea"
              style="width: 70%;"
            >
            </el-input>
          </li>

          <li>
            <div>
              <span>维修意见</span>
              <template>
                <el-select v-model="value" placeholder="请选择" style="width: 70%;">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </template>
            </div>
            <div>
              <span>服务站</span>
              <el-input style="width: 70%;"></el-input>
            </div>
          </li>
        </ul>
      </div>
      <div class="footer">
        <div class="footer-left">
          <template>
            <el-table
              :data="tableData"
              style="width: 100%">
              <el-table-column
                prop="date"
                label="零件名称"
                width="180">
              </el-table-column>
              <el-table-column
                prop="name"
                label="零件图号"
                width="180">
              </el-table-column>
              <el-table-column
                prop="address"
                label="数量">
              </el-table-column>
              <el-table-column
                prop="address"
                label="单价（元）">
              </el-table-column>
              <el-table-column
                prop="address"
                label="管理费（元）">
              </el-table-column>
            </el-table>
          </template>
        </div>
        <div class="footer-right">
          <template>
            <el-table
              :data="tableData"
              style="width: 100%">
              <el-table-column
                prop="date"
                label="作业内容"
                width="180">
              </el-table-column>
              <el-table-column
                prop="name"
                label="维修工时"
                width="180">
              </el-table-column>
              <el-table-column
                prop="address"
                label="金额（元）">
              </el-table-column>
              <el-table-column
                prop="address"
                label="差旅费（元）">
              </el-table-column>
              <el-table-column
                prop="address"
                label="其他费用（元）">
              </el-table-column>
            </el-table>
          </template>
        </div>
      </div>
    </div>
    <div class="bottom">
      <el-button type="primary" size="medium">确定</el-button>
      <el-button type="info" size="medium" @click="revert()">返回</el-button>
    </div>
  </div>
</template>


<script>
import axios from "axios";

export default {


  data() {
    return {
      textarea:"",
      tableData:[{}],
      value:"",
      options:[],
      header:"维保审核"
    };
  },
  created() {
    this.shows = this.$route.query.shows
    if(this.shows == 0) {
      this.header =  "维保审核"
    } else {
      this.header = "维保详情"
    }
  },
  methods: {
    //返回
    revert() {
      this.$router.go(-1);
    },
  }
}

</script>
<style lang="scss" scoped>
@import "@/assets/scss/base.scss";
.nav {
  height: 60px;
  padding: 0 1%;
  position: relative;

  p {
    height: 40px;
    margin: 10px 0;
    line-height: 40px;

    span {
      background: $Header_color;
      color: $Header_color;
    }
  }

  #nav_go5 {
    position: absolute;
    top: 10px;
    right: 1%;

    img {
      height: 16px;
      padding-right: 10px;
    }
  }
}
.Main {
  width: 98%;
  //margin-left: 10px;
  margin: auto;
  background: #fff;
  p {
    text-align: center;
    font-weight: 700;
    font-size: 20px;
    border-bottom: 1px solid rgb(220, 222, 226);
    width: 98%;
    margin-left: 15px;
    padding-bottom: 15px;
    padding-top: 15px;
  }

  .header {
    border-bottom: 1px solid rgb(220, 222, 226);
    width: 98%;
    //margin-left: 15px;
    padding-bottom: 20px;
    margin: auto;
    ul {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      color: #909399;
      margin-top: 20px;
      li {
        width: 33%;
        font-size: 14px;
        margin-bottom: 10px;
        text-align: center;
        span {
          display: inline-block;
          width:28%;
        }
      }
    }
  }
  .intermediate {
    border-bottom: 1px solid rgb(220, 222, 226);
    width: 98%;
    //margin-left: 15px;
    margin: auto;
    padding-bottom: 20px;
    ul {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      color: #909399;
      margin-top: 20px;

      li {
        width: 25%;
        font-size: 14px;
        margin-bottom: 10px;
        text-align: center;
        span {
          display: inline-block;
          width:28%;
        }
      }
    }
  }
  .intermediate-two {
    border-bottom: 1px solid rgb(220, 222, 226);
    width: 98%;
    margin: auto;
    padding-bottom: 20px;
    ul {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      color: #909399;
      margin-top: 20px;
      li {

        width: 33%;
        font-size: 14px;
        margin-bottom: 10px;
        text-align: center;
        div {
          margin-top: 5px;
        }
        span {
          display: inline-block;
          width:25%;
        }
        //.el-input-two{
        //  margin-top: 10px;
        //  margin-left: 74px;
        ////}

      }
      .el-input-center{
        display: flex;
        align-items:center;
      }
    }
  }
  .footer {
    display: flex;
    justify-content: space-between;
    width: 98%;
    margin: auto;
    //height:400px;
    margin-top: 20px;
    padding-bottom: 20px;
    .footer-left {
      width: 48%;
      /deep/ .is-leaf {
        text-align: center;
        background: #ffffff;

      }


    }
    .footer-right {
      width: 51%;

      /deep/ .is-leaf {
        text-align: center;
        background: #fff;
      }
    }
  }
}

.bottom {
  padding-top: 20px;
  text-align: center;
}
</style>
